<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../node_modules/react/umd/react.development.js"></script>
    <script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="../node_modules/babel-standalone/babel.min.js"></script>
    <script src="../node_modules/prop-types/prop-types.js"></script>
  </head>
  <body>
    <div id="reactDom"></div>
    <script type="text/babel">
      // state 状态
      // state和props的区别
      // props是组件对外的接口  state是组件对内的接口
      // 组件内可以引用其他组件  组件之间的引用就形成了一个树状的接口 如果下层组件需要使用上层组件的数据，上层组件就可以通过下层组件中props类进行数据的传递  因此props就是组件对外的接口

      // 如果想使用状态 那么不能使用无状态组件
      class Com extends React.Component {
        // 在es6中不管子类写不写constructor 在new实例的 时候都会不上constructor;
        // 我们可以不写 但是如果我们写了constructor 之后就必须在其中协商super()就是指向父类的构造方法
        constructor(props) {
          // 如果想在constructor使用props  那么super中必须写上props
          super(props);

          //   定义state
          this.state = {
            name: "西西",
          };
        }
        render() {
          return (
            <div>
              <button
                onClick={() => {
                  this.setState({ name: "哈哈" });
                }}
              >
                点我改变state的数据
              </button>
              <div>我是一个组件------{this.state.name}</div>
            </div>
          );
        }
      }

      ReactDOM.render(<Com />, document.getElementById("reactDom"));
    </script>
  </body>
</html>
